<template>
	<view class="global">
		<view>
			<uni-section titleFontSize="17px" title="会议预约" type="line">
				<view style="margin-left: 10px;">
					<!-- 基础表单校验 -->
					<uni-forms ref="valiForm" :rules="rules" :modelValue="meetFormData" border>
						<uni-forms-item label="主题" required name="theme">
							<uni-easyinput trim="all" :maxlength=10 :inputBorder="false" v-model="meetFormData.theme"
								placeholder="最多输入十个字符" />
						</uni-forms-item>
						<uni-forms-item label="时间" required name="beginEndTime">
							<uni-datetime-picker :border="false" :hide-second="true" placeholder="会议开始/结束时间"
								v-model="meetFormData.beginEndTime" type="datetimerange" rangeSeparator="至" />
						</uni-forms-item>
						<uni-forms-item label="发起人" required name="authorPhone">
							<uni-easyinput trim="all" type="number" :inputBorder="false"
								v-model="meetFormData.authorPhone" placeholder="请输入发起人号码" />
						</uni-forms-item>
						<uni-forms-item label="参会人" required name="participants">
							<uni-easyinput @clear="clearPhone" @focus="open" :inputBorder="false"
								v-model="meetFormData.participants" placeholder="请选择参会人" />
						</uni-forms-item>
						<uni-forms-item label="会议室" required name="roomName">
							<uni-easyinput @clear="clearRoom" @focus="openRoom" :inputBorder="false"
								v-model="meetFormData.roomName" placeholder="请选择会议室" />
						</uni-forms-item>
						<uni-forms-item label="备注" name="remark">
							<uni-easyinput trim="all" :inputBorder="false" type="textarea" autoHeight
								v-model="meetFormData.remark" placeholder="请输入会议备注" />
						</uni-forms-item>
					</uni-forms>
					<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
						direction="horizontal" @trigger="submit" @fabClick="fabClick"></uni-fab>
				</view>
			</uni-section>
		</view>
		<view>
			<!-- 参会人弹出层 -->
			<uni-popup @maskClick="maskClick" background-color="white" ref="popup" type="bottom">
				<view style="height: 400px;">
					<!-- 部门选择部分 -->
					<view class="cu-form-group margin-top">
						<picker @change="PickerChange" :value="index" :range="picker">
							<view class="picker">
								<text style="font-size: 18px; color: #0081ff;">部门选择</text>
							</view>
						</picker>
					</view>
					<!-- 展示部门数据部分 -->
					<view v-if="deptFlag">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-h">
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in deptUsers" :key="index"
									@click="choosed(item.phone)">
									<view class="cu-avatar">
										<image style="width: 60px; height: 40px; border-radius: 10%;"
											:src="item.avatar">
										</image>
									</view>
									<view class="content">
										<view class="text-pink">
											<view class="text-cut">{{item.name}}</view>
										</view>
										<view class="text-gray text-sm flex">
											<view class="text-cut">{{item.phone}}</view>
										</view>
									</view>
									<view class="action">
										<view class="text-grey text-xs">{{item.role}}</view>
										<view class="cu-tag round bg-red sm">{{item.deptName}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>

		<view>
			<!-- 会议室弹出层 -->
			<view>
				<uni-popup background-color="white" ref="roomPopup" type="bottom">
					<view style="height: 400px;">
						<!-- 展示会议室数据部分 -->
						<view>
							<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
								<view class="cu-list menu-avatar">
									<view class="cu-item" v-for="(item,index) in roomDatas" :key="index"
										@click="roomChoosed(item.name)">
										<view class="cu-avatar">
											<image style="width: 60px; height: 40px; border-radius: 10%;"
												:src="item.image">
											</image>
										</view>
										<view class="content">
											<view class="text-pink">
												<view class="text-cut">{{item.name}}</view>
											</view>
											<view class="text-gray text-sm flex">
												<view class="text-cut">位置：{{item.location}}</view>
											</view>
										</view>
										<view class="action">
											<view class="cu-tag round bg-red sm">容量：{{item.capacity}}</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onTabItemTap
	} from "@dcloudio/uni-app";
	import {
		getMeetRoomData
	} from '@/api/room.js';
	import {
		save
	} from "@/api/reservation.js";
	import {
		getDepartmentList,
		getDepartmentUser
	} from "@/api/department.js";
	import {
		checkToken
	} from '@/utils/checkToken.js';
	import {
		checkIsLeader
	} from '@/utils/checkIsLeader.js';
	import {share} from '@/utils/share.js';
	onLoad(async () => {
		share();
		//获取会议室数据
		await getRoomData();
	});

	//会议预约数据及提交
	const meetFormData = ref({
		theme: '',
		beginEndTime: [], //会议开始时间
		authorPhone: '', //发起人号码
		participants: [], //参会人
		roomName: '', // 会议室
		remark: '' //会议备注
	});

	//监听底部tabbar
	onTabItemTap(() => {
		//检查是否登录
		if (!checkToken()) {
			uni.redirectTo({
				url: '/pages/phoneLogin/phoneLogin'
			})
		} else {
			if (!checkIsLeader()) {
				uni.showModal({
					title: '提示',
					content: '普通用户无法预约会议',
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
		};
		getRoomData();
		const userInfo = uni.getStorageSync('user');
		meetFormData.value.authorPhone = userInfo.phone;
	});

	//Form表单校验
	const valiForm = ref(null);
	const rules = ref({
		theme: {
			rules: [{
				required: true,
				errorMessage: '会议主题不能为空'
			}]
		},
		beginEndTime: {
			rules: [{
				required: true,
				errorMessage: '会议开始时间不能为空'
			}]
		},
		roomName: {
			rules: [{
				required: true,
				errorMessage: '会议室不能为空'
			}]
		},
		authorPhone: {
			rules: [{
				required: true,
				errorMessage: '发起人号码不能为空'
			}]
		},
		participants: {
			rules: [{
				required: true,
				errorMessage: '参会人号码不能为空'
			}]
		}
	});


	const active = ref(false);

	function submit(e) {
		content.value[e.index].active = !e.item.active;
		valiForm.value.validate((valid) => {
			if (!valid) {
				//提交预约数据
				save(meetFormData.value).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '会议预约成功！',
							icon: 'success'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 500);
					}
				})
			}
		})
	};
	//点击提交按钮展示
	function fabClick() {
		uni.showToast({
			title: '即将前往提交!',
			icon: 'none'
		})
	}
	//提交按钮配置项
	const pattern = ref({
		selectedColor: '#2979ff',
		buttonColor: '#2979ff',
		icon: 'checkbox-filled'
	});
	const content = ref([{
		iconPath: '/static/icons/submit.png',
		selectedIconPath: '/static/icons/submit_light.png',
		text: '提交'
	}]);

	//下拉刷新请求数据
	onPullDownRefresh(() => {
		getRoomData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	// 弹出层
	const popup = ref(null);
	const picker = ref([]);
	const index = ref(-1);
	const deptFlag = ref(false);

	function open() {
		popup.value.open('bottom');
		//获取部门名称
		getDepartmentList().then(res => {
			if (res.code === 200) {
				picker.value = res.data;
			}
		})
	};

	//获取具体部门的用户
	const deptUsers = ref([]);

	function PickerChange(e) {
		index.value = e.detail.value;
		getDepartmentUser(picker.value[index.value]).then(res => {
			if (res.code === 200) {
				deptUsers.value = res.data;
			}
			deptFlag.value = true;
		})
	};

	//用户被选择
	function choosed(phone) {
		uni.showToast({
			title: '已选中',
			icon: 'none'
		});
		if (phone !== null) {
			meetFormData.value.participants.push(phone);
		};
	};

	//遮罩层关闭
	function maskClick() {
		deptFlag.value = false;
	};

	//清空用户数据
	function clearPhone() {
		meetFormData.value.participants = [];
	};

	//会议室选择部分
	const roomPopup = ref(null);
	const roomDatas = ref([]);

	function getRoomData() {
		getMeetRoomData().then(res => {
			if (res.code === 200) {
				roomDatas.value = res.data;
			}
		});
	};

	function openRoom() {
		roomPopup.value.open('bottom');
	};

	//用户被选择
	function roomChoosed(name) {
		uni.showToast({
			title: '已选中',
			icon: 'none'
		});
		if (name !== null) {
			meetFormData.value.roomName = name;
		};
	};

	//清空会议室数据
	function clearRoom() {
		meetFormData.value.roomName = '';
	};

	const scrollTop = ref(0);
</script>

<style scoped lang="scss">
	.global {
		background-color: #F5F5F5;
		height: 100vh;
	}

	.scroll-Y {
		height: 400px;
	}

	.scroll-h {
		height: 350px;
	}
</style>